import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss';
import presetRemToPx from '@unocss/preset-rem-to-px';

/*
 * 图标地址： https://icones.js.org/
 * 1. 下载需要的图标库（示例为 Material Design Icons）： pnpm add -D @iconify-json/mdi
 * 2. 代码使用： <div i-mdi-access-point />
 * */
export default defineConfig({
  presets: [presetIcons(), presetUno(), presetAttributify(), presetRemToPx({ baseFontSize: 4 })],
  shortcuts: [
    ['wh-full', 'w-full h-full'],
    ['f-c-c', 'flex justify-center items-center'],
    ['flex-col', 'flex flex-col'],
    ['card-border', 'border border-solid border-light_border dark:border-dark_border'],
    ['auto-bg', 'bg-white dark:bg-dark'],
    ['auto-bg-hover', 'hover:bg-#eaf0f1 hover:dark:bg-#1b2429'],
    ['auto-bg-highlight', 'bg-#eaf0f1 dark:bg-#1b2429'],
    ['text-highlight', 'rounded-4 px-8 py-2 auto-bg-highlight']
  ],
  rules: [['card-shadow', { 'box-shadow': '0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017' }]],
  theme: {
    colors: {
      primary: 'rgba(var(--primary-color))',
      dark: '#18181c',
      light_border: '#efeff5',
      dark_border: '#2d2d30'
    }
  }
});
